<template>
    <view class="main">
        <form>
            <view class="form-box shadow">
                <view class="form-group">
                    <view class="title must">字段名称</view>

                    <input :disabled="formType == 'mobile'" placeholder="请输入字段名称 (必填，60字以内)" maxlength="60" placeholder-class="phc" v-model="formTitle" />
                </view>
                <view v-if="formType == 'mobile'" class="title-desc">手机字段不能修改名称，且为必填！</view>
            </view>

            <view class="form-box shadow">
                <view class="form-group" v-if="formType != 'mobile'">
                    <view class="title must">
                        是否必填
                        <text class="title-info">(为空时不能提交)</text>
                    </view>
                    <switch :disabled="formType == 'mobile'" v-if="formMust" @change="switchModel" data-item="formMust" class="green sm" :checked="true"></switch>
                    <switch :disabled="formType == 'mobile'" v-else-if="!formMust" @change="switchModel" data-item="formMust" class="green sm"></switch>
                </view>

                <view class="form-group" v-if="formType != 'mobile'">
                    <view class="title must">字段填写类型</view>
                    <cmpt-picker style="flex: 1" :item.sync="formType" :sourceData="typeOptions" />
                </view>

                <view v-if="formType == 'line' || formType == 'multi' || formType == 'number' || formType == 'digit'" class="form-group">
                    <view class="title must">可填字数</view>
                    <cmpt-picker style="flex: 1" :item.sync="formLen" :sourceData="lenOptions" />
                </view>

                <!-- select begin -->
                <block v-if="formType == 'select' || formType == 'checkbox'">
                    <view class="form-group">
                        <view class="title must" v-if="formType == 'select'">单项选择-选项配置</view>
                        <view class="title must" v-if="formType == 'checkbox'">多项选择-选项配置</view>
                    </view>

                    <view class="form-group" v-for="(item, index) in formSelectOptions" :key="index">
                        <input
                            @input="bindSelectOptionsBlur"
                            :data-idx="index"
                            :placeholder="'请输入选项' + (index + 1) + ' （30字以内)'"
                            maxlength="30"
                            placeholder-class="phc"
                            :value="item"
                        />

                        <text @tap="bindDelSelectOptionsTap" :data-idx="index" class="icon-roundclose margin-left-xs text-red select-close"></text>
                    </view>
                    <view class="form-group" @tap="bindAddSelectOptionsTap">
                        <view class="title text-blue" style="font-weight: normal; font-size: 30rpx">
                            <text class="icon-roundadd margin-right-s select-close" style="font-size: 35rpx"></text>
                            添加新选项
                        </view>
                    </view>
                </block>

                <view v-if="formType == 'checkbox'" class="form-group">
                    <view class="title must">多项选择-最少选中项数</view>
                    <cmpt-picker style="flex: 1" :item.sync="formCheckBoxLimit" :sourceData="checkBoxLimitOptions" />
                </view>
                <!-- select END -->

                <!-- mobile begin -->
                <!--
			<block wx:if="{{formType=='mobile'}}">
				<view class="form-group">
					<view class="title ">真实性校验<text class="margin-left-xs text-red">*</text></view>
					<switch wx:if="{{formMobileTruth}}" bindchange="switchModel" data-item="formMobileTruth" class="green sm" checked="true">
					</switch>
					<switch wx:elif="{{!formMobileTruth}}" bindchange="switchModel" data-item="formMobileTruth" class="green sm"></switch>
				</view>
				<view class="title-desc">系统将校验用户填入手机号码的真实性</view>
			</block>
			-->
                <!-- mobile END -->
            </view>

            <view class="form-box shadow">
                <view class="form-group">
                    <view class="title">
                        填写说明
                        <text class="text-grey text-normal">(选填)</text>
                    </view>
                </view>
                <view class="form-group">
                    <input placeholder="提示用户该字段如何填写 (选填，30字以内)" maxlength="30" placeholder-class="phc" v-model="formDesc" />
                </view>
                <view v-if="formDescFocus" class="hint-desc error">{{ formDescFocus }}</view>
            </view>

            <view :class="'padding-bottom flex  ' + (index == -1 ? 'flex-direction' : 'oprt')">
                <button v-if="index > -1 && formType != 'mobile'" @tap="bindDelTap" class="btn bg-red margin-top-s text-bold large">删除</button>
                <button @tap="bindSubmitTap" class="btn bg-blue text-white margin-top-s text-bold large">保存</button>
            </view>
        </form>
    </view>
</template>

<script>
import cmptPickerMulti from '../../../picker_multi/picker_multi_cmpt';
const pageHelper = require('../../../../../helper/page_helper.js');
const dataHelper = require('../../../../../helper/data_helper.js');
const helper = require('../../../../../helper/helper.js');
const formSetHelper = require('../../form_set_helper.js');
let _parentFormSet = null;
export default {
    components: {
        cmptPickerMulti
    },
    data() {
        return {
            index: -1,

            // 父页面索引 -1则为新加

            typeOptions: formSetHelper.getTypeOptions(),

            onlySetOptions: formSetHelper.getOnlySetOptions(),
            lenOptions: dataHelper.getSelectOptions(
                '1=1个字以内,2=2个字以内,3=3个字以内,4=4个字以内,5=5个字以内,6=6个字以内,7=7个字以内,8=8个字以内,9=9个字以内,10=10个字以内,15=15个字以内,20=20个字以内,30=30个字以内,40=40个字以内,50=50个字以内,100=100个字以内,200=200个字以内,500=500个字以内'
            ),
            checkBoxLimitOptions: dataHelper.getSelectOptions(
                '0=0项,1=1项,2=2项,3=3项,4=4项,5=5项,6=6项,7=7项,8=8项,9=9项,10=10项,11=11项,12=12项,13=13项,14=14项,15=15项,16=16项,17=17项,18=18项,19=19项,20=20项'
            ),
            onlySetDesc: '',

            // 基本属性
            formMark: '',

            formType: 'line',
            formTitle: '',
            formDesc: '',
            formMust: true,
            formLen: 50,

            formOnlySet: {
                mode: 'all',
                cnt: -1
            },

            // type=select
            formSelectOptions: ['', ''],

            // type=mobile
            formMobileTruth: true,

            //手机真实性

            // type=checkbox
            formCheckBoxLimit: 2,

            formDescFocus: []
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            formMark: formSetHelper.mark(),
            onlySetDesc: formSetHelper.getOnlySetDesc(this.formOnlySet)
        });
        let parent = pageHelper.getPrevPage(2);
        if (!parent) {
            return;
        }
        _parentFormSet = parent.zpSelectComponent('#form-set');
        if (options && helper.isDefined(options.idx)) {
            let index = options.idx;
            let fields = _parentFormSet.get();
            let node = fields[index];
            if (!node.mark) {
                node.mark = formSetHelper.mark();
            }
            this.setData({
                index,
                formMark: node.mark,
                formType: node.type,
                formTitle: node.title,
                formDesc: node.desc,
                formMust: node.must,
                formLen: node.len,
                formOnlySet: node.onlySet,
                formSelectOptions: node.selectOptions,
                formMobileTruth: node.mobileTruth,
                formCheckBoxLimit: node.checkBoxLimit,
                onlySetDesc: formSetHelper.getOnlySetDesc(node.onlySet)
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    methods: {
        // 重复次数
        bindOnlySetCmpt: function (e) {
            let formOnlySet = {};
            formOnlySet.mode = e.detail[0];
            formOnlySet.cnt = e.detail[1];
            this.setData({
                formOnlySet,
                onlySetDesc: formSetHelper.getOnlySetDesc(formOnlySet)
            });
        },

        bindDelTap: function (e) {
            if (this.index == -1) {
                return;
            }
            let callback = () => {
                let fields = _parentFormSet.get();
                fields.splice(this.index, 1);
                _parentFormSet.set(fields);
                uni.navigateBack({
                    delta: 0
                });
            };
            pageHelper.showConfirm('确定要删除当前字段吗？', callback);
        },

        bindSubmitTap: function (e) {
            if (this.formTitle.length < 1) {
                return pageHelper.showModal('字段名称必填哦');
            }
            if (this.formTitle.length > 60) {
                return pageHelper.showModal('字段名称必不能超过60个字');
            }
            if (this.formDesc.length > 30) {
                return pageHelper.showModal('填写说明不能超过30个字');
            }
            if (this.formType.length < 1) {
                return pageHelper.showModal('字段填写类型必须选择哦');
            }
            let formType = this.formType;
            if (formType == 'select' || formType == 'checkbox') {
                // 下拉框
                let formSelectOptions = this.formSelectOptions;
                for (let k in formSelectOptions) {
                    if (formSelectOptions[k].length < 1) {
                        return pageHelper.showModal('选项' + (Number(k) + 1) + '还没填哦');
                    }
                    if (formSelectOptions[k].length > 30) {
                        return pageHelper.showModal('选项' + (Number(k) + 1) + '不能超过30个字，精简一点!');
                    }
                }
                this.formMobileTruth = true;
                this.formLen = 50;
                if (formType == 'select') {
                    this.formCheckBoxLimit = 2;
                }
            } else if (formType == 'mobile') {
                //非本类型的排除
                this.formSelectOptions = ['', ''];
                this.formCheckBoxLimit = 2;
                this.formLen = 50;
            } else {
                //非本类型的排除
                this.formSelectOptions = ['', ''];
                this.formMobileTruth = true;
                this.formCheckBoxLimit = 2;
                if (formType != 'line' && formType != 'multi' && formType != 'number' && formType != 'digit') {
                    this.formLen = 50;
                }
            }
            let parent = pageHelper.getPrevPage(2);
            if (!parent) {
                return;
            }
            let fields = _parentFormSet.get();
            let node = {
                mark: this.formMark,
                title: this.formTitle,
                desc: this.formDesc,
                type: this.formType,
                must: this.formMust,
                len: Number(this.formLen),
                onlySet: this.formOnlySet,
                selectOptions: this.formSelectOptions,
                mobileTruth: this.formMobileTruth,
                checkBoxLimit: Number(this.formCheckBoxLimit)
            };
            if (this.index == -1) {
                fields.push(node); //新的
            } else {
                fields[this.index] = node;
            }
            _parentFormSet.set(fields);
            uni.navigateBack({
                delta: 0
            });
        },

        switchModel: function (e) {
            pageHelper.switchModel(this, e, 'bool');
        },

        bindSelectOptionsBlur: function (e) {
            // 多选项目的输入
            let idx = pageHelper.dataset(e, 'idx');
            let val = e.detail.value.trim();
            let formSelectOptions = this.formSelectOptions;
            formSelectOptions[idx] = val;
            this.setData({
                formSelectOptions
            });
        },

        bindDelSelectOptionsTap: function (e) {
            let formSelectOptions = this.formSelectOptions;
            if (formSelectOptions.length <= 2) {
                return pageHelper.showModal('至少2个选项');
            }
            let callback = () => {
                let idx = pageHelper.dataset(e, 'idx');
                formSelectOptions.splice(idx, 1);
                this.setData({
                    formSelectOptions
                });
            };
            pageHelper.showConfirm('确定删除该项吗？', callback);
        },

        bindAddSelectOptionsTap: function (e) {
            let formSelectOptions = this.formSelectOptions;
            if (formSelectOptions.length >= 20) {
                return pageHelper.showModal('最多可以添加20个选项');
            }
            formSelectOptions.push('');
            this.setData({
                formSelectOptions
            });
        }
    }
};
</script>
<style>
@import './form_set_field.css';
</style>
